<template>
	<div class="create-news-container">
		<el-form ref="editForm" :model="editForm" :rules="editRules" label-width="120px">
			<el-form-item label="新闻标题" prop="newsTitle">
				<el-input maxlength="30" v-model="editForm.newsTitle"></el-input>
			</el-form-item>
			<el-form-item label="新闻类别" prop="newCategoryId">
				<el-select v-model="editForm.newCategoryId" filterable placeholder="请选择">
					<el-option v-for="type in newsTypeList" :key="type.id" :label="type.newsCategoryName" :value="type.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="新闻封面" prop="pictureUrl">
				<file-uploader ref="fUpl" :defaultUrl="editForm.pictureUrl" @onSuccess="imgSuccess" :buttonWidth="214"
				 :buttonHeight="160"></file-uploader>
			</el-form-item>
			<el-form-item label="新闻简介" prop="newsDescribe">
				<el-input  maxlength="200"  v-model="editForm.newsDescribe" type="textarea" placeholder="请输入新文简介"  class="news-describe" show-word-limit>
				</el-input>
			</el-form-item>
			<el-form-item label="新闻内容" prop="newsContent">
				<ueditor ref="myUeditor" v-model="editForm.newsContent"></ueditor>
			</el-form-item>
			<el-form-item label="默认审批通过" prop="status" v-if="editForm.id == null">
				<el-switch v-model="editForm.status" :active-value="1" :inactive-value="0"></el-switch>
			</el-form-item>
		</el-form>
		<div class="edit-page-bottom-buttom-bars">
			<el-button type="success" @click="preview">预览</el-button>
			<el-button type="primary" @click="onSubmit">提交</el-button>
			<el-button  @click="cancle">取消</el-button>
		</div>
	</div>
</template>

<script>
	import FileUploader from "@/components/FileUploader.vue"
	import Ueditor from "@/components/Ueditor.vue"
	import {
		mapActions
	} from "vuex"
	export default {
		components: {
			"file-uploader": FileUploader,
			"ueditor": Ueditor
		},
		data() {
			return {
				editForm: {
					id: null,
					newsTitle: '',
					newCategoryId: null,
					pictureUrl: "",
					newsContent: '',
					newsDescribe:"",
					yn: 1,
					status: 1,
					urlList: []
				},
				editRules: {
					newsTitle: [{
						required: true,
						message: '请输入新闻标题',
						trigger: 'blur'
					}],
					pictureUrl: [{
						required: true,
						message: '请上传新闻封面',
						trigger: 'change'
					}],
					newsContent: [{
						required: true,
						message: '请输入新闻内容',
						trigger: 'blur'
					}],
					newCategoryId: [{
						required: true,
						message: '请选择新闻类别',
						trigger: 'change'
					}],
					newsDescribe: [{
						required: true,
						message: '请输入新闻简介',
						trigger: 'blur'
					}],
				},
				newsTypeList: [],
				queryParams: null
			}
		},
		async mounted() {
			let _this = this;
			//初始化窗口
			let params = _this.$store.state.pageParams; //传入到新建题目的查询参数，新建题目不修改直接返回
			if (!params || JSON.stringify(params) == "{}") {
				_this.$message.error("参数有误");
				setTimeout(() => {
					_this.cancle();
				}, 300)
				return;
			}
			_this.queryParams = params.queryParams;
			_this.newsTypeList = params.newsTypeList;
			if (params.newsId || params.newsId == 0) {
				_this.editForm.id = params.newsId;
				await _this.getNewsDetail();
			}else if(params.newsInfo){
				_this.editForm = params.newsInfo;
			}
		},
		methods: {
			async getNewsDetail() {
				let _this = this;
				let ret = await _this.$api.getNewsDetail(_this.editForm.id);
				if (ret) {
					_this.editForm = ret;
					_this.$forceUpdate();
				}
			},
			imgSuccess(response, file, fileList) {
				this.editForm.pictureUrl = file.url;
			},
			preview(){
				
			},
			async onSubmit() {
				let _this = this;
				_this.$refs.editForm.validate(async (valid) => {
					if (valid) {
						let uplRet = _this.$refs.fUpl.getUploadResult();
						if (!uplRet.url) {
							_this.$message.error("请上传封面");
							return;
						}
						let editForm = _this.editForm;
						editForm.pictureUrl = uplRet.url;
						editForm.urlList = uplRet.uploadList.length == 0 ? "" : uplRet.uploadList.join();
						let status = editForm.status;
						editForm.status = status ? 1 : 0;
						let ret = await _this.$api.insertNews(editForm);
						if (ret) {
							_this.$message.success("编辑成功");
							setTimeout(() => {
								_this.cancle();
							}, 500)
						}
					} else {
						return false;
					}
				})
			},
			cancle() {
				this.setPageParams({
					queryParams: this.queryParams
				});
				this.$router.push({
					name: "NewsList"
				});
			},
			preview(){
				this.setPageParams({
					queryParams: this.queryParams,
					newsInfo: this.editForm
				});
				this.$router.push({
					name: "PreviewNews"
				});
			},
			...mapActions(["setPageParams"])
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.create-news-container {
		@include flex-column(flex-start, flex-start);

		.news-describe {}

		::v-deep .el-form {
			margin-top: 50px;
			width: 1000px;

			.el-textarea__inner {
				height: 300px;
			}
		}
	}
</style>
